<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="templates2/layout.xhtml">
	<ui:param name="title"
		value="Online Banking System | Saving Account Management"></ui:param>
	<ui:define name="header">
		<ui:include src="templates2/header.xhtml">
			<ui:param name="current" value="Saving Account Management"></ui:param>
			<ui:param name="subtitle" value="Saving Account Management"></ui:param>
		</ui:include>
	</ui:define>
	<ui:define name="content">
		<h:form>
			<!-- <c:if test="${not empty savingCreateTransManagedBean.message}">
				<h4 class="alert_info">#{savingAccountManagedBean.message}</h4>
			</c:if> -->
			<article class="module width_full">
				<header>
					<h3>Create Transaction</h3>
				</header>
				<div class="module_content">

					<fieldset style="width: 48%; float: left; margin-right: 3%;">
						<label>Customer:</label>
						<h:outputText
							value="#{savingCreateTransManagedBean.customer.lastName} #{savingCreateTransManagedBean.customer.midName} #{savingCreateTransManagedBean.customer.firstName} "
							style="width: 92%; font-weight: bold; color: black"
							readonly="true" />
						<br /> <br /> <label>Card Number ID:</label>
						<h:outputText
							value="#{savingCreateTransManagedBean.customer.idCardNumber}"
							style="width: 92%; font-weight: bold; color: black"
							readonly="true" />
						<br /> <br /> <label>Saving Account Number:</label>
						<h:outputText
							value="#{savingCreateTransManagedBean.customerAccount.accountNumber}"
							style="width: 92%; font-weight: bold; color: black"
							readonly="true" />
					</fieldset>

					<fieldset style="width: 48%; float: left;">
						<h:outputLabel
							value="Balance (#{savingCreateTransManagedBean.currency}):" />
						<h:outputText
							value="#{savingCreateTransManagedBean.currentBalance}"
							style="width: 92%; font-weight: bold; font-size:20px; magrin-top:30px"
							readonly="true">
							<f:convertNumber pattern="#,###,##0.00" />
						</h:outputText>
					</fieldset>

					<fieldset style="width: 48%; float: left; margin-right: 3%;">
						<label>TransactionType</label>
						<h:selectOneMenu id="types"
							value="#{savingCreateTransManagedBean.savingTransactionType}">
							<f:selectItems
								value="#{savingCreateTransManagedBean.transactionTypes}"
								style="width: 92%" var="transactionType"
								itemValue="#{transactionType}"
								itemLabel="#{transactionType.name()}" />
							<f:ajax execute="@this"
								render="pgInterestRate otAfterBalance otInterestRate otfunds"
								event="change" />
						</h:selectOneMenu>

					</fieldset>



					<h:panelGroup id="pgInterestRate">

						<h:panelGroup
							rendered="#{savingCreateTransManagedBean.savingTransactionType.type ne 'Saving'}">
							<fieldset style="width: 48%; float: left; margin-right: 3%;">
								<label>Funds</label>
								<h:outputText value="#{savingCreateTransManagedBean.funds}"
									id="otfunds" readonly="false"
									style="width: 92%; font-weight: bold; color: black; font-size:16px;">
									<f:convertNumber pattern="#,###,##0.00" />
								</h:outputText>
							</fieldset>
						</h:panelGroup>
						<h:panelGroup
							rendered="#{savingCreateTransManagedBean.savingTransactionType.type eq 'Saving'}">
							<fieldset style="width: 48%; float: left; margin-right: 3%;">
								<label>Funds</label> <span style="color: red"><h:message
										for="addAmount"></h:message></span>
								<h:inputText value="#{savingCreateTransManagedBean.funds}"
									id="addAmount" readonly="false" style="width: 92%;"
									converter="javax.faces.Long" converterMessage="Invalid amount">
									<f:validateLongRange for="addAmount" minimum="1" />
									<f:ajax execute="@this" render="otAfterBalance" event="blur" />
								</h:inputText>
							</fieldset>
						</h:panelGroup>


						<h:panelGroup
							rendered="#{savingCreateTransManagedBean.savingTransactionType.type eq 'Saving' || savingCreateTransManagedBean.savingTransactionType.type eq 'WithdrawInterest'}">
							<fieldset style="width: 48%; float: left;">
								<label>Interest Rate (%/year):</label>
								<h:outputText
									value="#{savingCreateTransManagedBean.newInterestRate}"
									id="otInterestRate"
									style="width: 92%; font-weight: bold; color: black; font-size:16px; magrin-top:10px"
									readonly="true" />
							</fieldset>

							<fieldset style="width: 48%; float: left; margin-right: 3%;">
								<label>Duration</label>
								<h:selectOneMenu
									value="#{savingCreateTransManagedBean.periodTypeID}">
									<f:selectItems
										value="#{savingCreateTransManagedBean.periodTypes}"
										var="periodType" itemValue="#{periodType.periodTypeID}"
										itemLabel="#{periodType.savingPeriodType}" />
									<f:ajax execute="@this"
										render="otInterestRate otAfterBalance otExpiredDate"
										event="change" />
								</h:selectOneMenu>
							</fieldset>

							<fieldset style="width: 48%; float: left;">
								<label>Expired Date:</label>
								<h:outputText
									value="#{savingCreateTransManagedBean.expiredDate}"
									id="otExpiredDate"
									style="width: 92%; font-weight: bold; font-size:18px; magrin-top:10px"
									readonly="true">
									<f:convertDateTime pattern="dd-MM-yyyy" />
								</h:outputText>
							</fieldset>
						</h:panelGroup>
					</h:panelGroup>


					<fieldset style="width: 48%; float: left;">
						<label>Balance After:</label>
						<h:outputText value="#{savingCreateTransManagedBean.afterBalance}"
							id="otAfterBalance"
							style="color: #{savingCreateTransManagedBean.savingTransactionType.type eq 'Saving' ? 'green' : 'red'}; width: 92%; font-weight: bold; font-size:18px; magrin-top:10px"
							readonly="true">
							<f:convertNumber pattern="#,###,##0.00" />
						</h:outputText>
					</fieldset>

					<div class="clear"></div>
				</div>
				<footer>
					<div class="submit_link">

						<h:commandButton value="Save"
							action="#{savingCreateTransManagedBean.createTransaction}" />
						<h:commandButton value="Back"
							action="#{savingCreateTransManagedBean.back}" />
					</div>
				</footer>
			</article>

		</h:form>
	</ui:define>
	<ui:define name="sidebar">
		<ui:include src="templates2/sidebar.xhtml">
			<ui:param name="current" value="home"></ui:param>
		</ui:include>
	</ui:define>
</ui:composition>
<SCRIPT type="text/javascript">
	function validateInput(regexString) {
		var theEvent = window.event || event;
		var key = theEvent.keyCode || theEvent.which;
		if (key >= 46) {
			key = String.fromCharCode(key);
			var regex = new RegExp("^" + regexString + "$");
			if (!regex.test(key)) {
				theEvent.returnValue = false;
				if (theEvent.preventDefault) {
					theEvent.preventDefault();
				}
			}
		}
	}
</SCRIPT>

</html>